<template>
  <div class="basic-box">
    <div class="title">基础图标 :</div>
    <div class="center">
      <div v-for="icon of iconUrls.basic" :key="icon">
        <el-tooltip class="box-item" effect="dark" :content="'svg-' + icon" placement="top-start">
          <SvgIcon :name="'svg-' + icon"></SvgIcon>
        </el-tooltip>
      </div>
    </div>
    <div class="title mt10">项目私有图标 :</div>
    <div class="center">
      <div v-for="icon of iconUrls.private" :key="icon">
        <el-tooltip class="box-item" effect="dark" :content="'svg-' + icon" placement="top-start">
          <SvgIcon :name="'svg-' + icon"></SvgIcon>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="BasicIcon">
const files = import.meta.glob('/src/assets/svg/*.svg', { eager: true });
const files2 = import.meta.glob('/src/assets/svg-basic/*.svg', { eager: true });

let iconUrls = ref({
  basic: null,
  private: null,
  other: ''
});
const removeSvgExtension = str => {
  return str.replace(/\.svg$/, '');
};
onBeforeMount(() => {
  iconUrls.value.basic = Object.keys(files).map(path => removeSvgExtension(path?.split('/')?.pop()));
  iconUrls.value.private = Object.keys(files2).map(path => removeSvgExtension(path?.split('/')?.pop()));
});
</script>

<style lang="scss" scoped src="./index.scss"></style>
